<template>
    <div class="home">
        <div class="header">
            <div class="info">
                <div class="userInfo">
                    <img src="../../assets/imgs/home/info.png" alt/>
                    <div>
                        <p>{{goodlist.account}}</p>
                        <p>{{goodlist.position}}</p>
                    </div>
                </div>
                <div class="flow">
                    <p>今日客流量</p>
                    <p>
                        <span>{{goodlist.dateflow}}</span>人
                    </p>
                </div>
            </div>
            <div class="tabBar">
                <div class="touch" @click="mapOther(0)">
                    <div>
                        <div class="costomer">
                            <img src="../../assets/imgs/home/passengerflow.png" style="width: 100%;height: 100%;" alt/>
                        </div>
                        <div class="costomerName">客流量</div>
                    </div>
                </div>
                <div class="touch" @click="mapOther(1)">
                    <div>
                        <div class="costomer">
                            <img src="../../assets/imgs/home/sales.png" style="width: 100%;height: 100%;" alt/>
                        </div>
                        <div class="costomerName">销售额</div>
                    </div>
                </div>
                <div class="touch" @click="mapOther(2)">
                    <div>
                        <div class="costomer">
                            <img src="../../assets/imgs/home/pingxiao.png" style="width: 100%;height: 100%;" alt/>
                        </div>
                        <div class="costomerName">坪效</div>
                    </div>
                </div>
                <div class="touch" @click="mapOther(3)">
                    <div>
                        <div class="costomer">
                            <img src="../../assets/imgs/home/collecting.png" style="width: 100%;height: 100%;" alt/>
                        </div>
                        <div class="costomerName">集客力</div>
                    </div>
                </div>
            </div>
            <div @click="retailtime" class="swiper">
                <div class="inner-container" v-for="imt in itemMessage">
                    <div style="display: flex;justify-content: space-between">
                        <div style="display: flex;justify-content: flex-start">
                            <div style="width:5px;height:5px;background:rgba(255,116,96,1);margin-top: 13px;border-radius: 50%;margin-right: 10px;font-size: 10px"></div>
                            <div style="font-size: 10px">{{imt.name}}</div>
                        </div>
                        <div style="font-size: 10px">{{imt.time}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="border-bottom: 1px solid #E7E7E7;padding: 21px 16px;">
            <div class="titleBar">
                <titles text="品牌落位"></titles>
            </div>
            <div class="map" @click="map">
                <img src="../../assets/imgs/home/brand.png" alt/>
            </div>
            <div class="shopList">
                <div v-for="value in business">
                    <p class="tag">{{value.brands}}: {{value.amount}}家</p>
                </div>
                <p @click="distribution" style="font-size: 10px;">更多</p>
            </div>
        </div>
        <div style="border-bottom: 1px solid #E7E7E7;padding: 21px 16px;">
            <div class="titleBar">
                <titles text="指标数据"></titles>
            </div>
            <div class="date">
                <div @click="shopGrade" style="margin-right: 10px">
                    <img src="../../assets/imgs/home/shoplevel.png" style="width: 103px;height: 67px;" alt/>
                </div>
                <div @click="overview" style="margin-right: 10px">
                    <img src="../../assets/imgs/home/salesview.png" style="width: 103px;height: 67px;" alt/>
                </div>
                <div>
                    <img src="../../assets/imgs/home/smart.png" style="width: 103px;height: 67px;" alt/>
                </div>
            </div>
        </div>
        <div style="border-bottom: 1px solid #E7E7E7;padding: 21px 16px;">
            <div class="titleBar">
                <titles text="店铺转化率排行榜"></titles>
            </div>
            <div class="shopLevel" v-for="(item,index) in top3" :key="item.id" @click="btnMap(item.fid,item.floor)">
                <div style="display: flex;justify-content: flex-start;">
                    <div class="icon" v-if="index == 0">
                        <img src="../../assets/imgs/home/top.png" style="width: 100%;height: 100%;" alt/>
                    </div>
                    <div class="icon" v-else-if="index == 1">
                        <img src="../../assets/imgs/home/mind.png" style="width: 100%;height: 100%;" alt/>
                    </div>
                    <div class="icon" v-else-if="index == 2">
                        <img src="../../assets/imgs/home/down.png" style="width: 100%;height: 100%;" alt/>
                    </div>
                    <div class="shopInfo" style="display: flex;justify-content: flex-start">
                        <div class="shopIcon">
                            <img :src="item.pic_url"
                                 style="width: 100%;height: 100%;border-radius: 50%;" alt/>
                        </div>
                        <div style="margin-top: -10px;margin-left: 15px">
                            <div class="shopName" style="font-size:13px;text-align: left">{{item.name}}</div>
                            <div class="shopName" style="font-size:12px;display: flex;justify-content: flex-start">
                                <p style="margin-right: 5px">客流量：{{item.low}}</p>
                                <p>销售额：{{item.salevolume}}万</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <p style="font-size:12px;line-height: 26px; margin-top: -10px;">转化率</p>
                    <p style="font-size:11px;color: #E04F49">{{item.rate}}%</p>
                </div>
            </div>
            <div class="more" @click="conversion">点击查看更多</div>
        </div>
    </div>

</template>

<script>
    import titles from "../../components/titleBar";
    export default {
        props: {

        },
        components: {
            titles
        },
        data() {
            return {
                value1: 0,
                option1: [
                    { text: '全部商品', value: 0 },
                    { text: '新款商品', value: 1 },
                    { text: '活动商品', value: 2 }
                ],
                userInfo: {},
                itemMessage: [

                ],
                goodlist: '',
                business: [],
                top3: []
            };
        },
        computed: {},
        created() {
        },
        mounted() {
            var that = this;
            that.getData()
            // that.message()
        },
        methods: {
            btnMap(fid,floor){
                // alert(floor)
                this.$router.push({path: "/map", query: {type: 4,fid:fid,floor:floor}})
            },
            getData() {
                this.$api.get('market/home/index', {}, response => {
                    var x;
                    var t;
                    if (response.status >= 200 && response.status < 300) {
                        console.log(response.data.data);
                        this.goodlist = response.data.data;
                        this.business = response.data.data.formatdistri;
                        // this.top3 = response.data.data.top3;
                        var newArr = []
                        for (x in response.data.data.todayMsg) {
                            var arr = response.data.data.todayMsg[x].split(",");
                            // console.log(arr, 'kkk')
                            var vote = {}
                            for (t in arr) {
                                vote.name = arr[0]
                                vote.time = arr[1]
                            }
                            newArr.push(vote)
                            console.log(newArr)
                        }
                        this.itemMessage = newArr;
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            },
            map(){
                this.$router.push({path: "/map"})
            },
            // map(){
            //     this.$router.push({path: "/demo"})
            // },
            shopGrade() {
                this.$router.push({path: "/shopGread"})
            },
            conversion() {
                this.$router.push({path: "/conversion"})
            },
            retailtime() {
                this.$router.push({path: "/retailtime"})
            },
            overview() {
                this.$router.push({path: "/overview"})
            },
            distribution() {
                this.$router.push({path: "/distribution"})
            },
            mapOther(type){
                this.$router.push({path: "/map", query: {type: type}})
            }
        }
    };
</script>

<style scoped lang="scss">
    .inner-container {
        animation: myMove 4s linear infinite;
        animation-fill-mode: forwards;
    }

    /*文字无缝滚动*/
    @keyframes myMove {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-100px);
        }
    }

    /deep/ .el-carousel__item, .el-carousel__mask {
        height: 50% !important;
    }

    .home {
        margin: 0 auto;
        background-color: #ffff;

        .titleBar {
            /*width: 100%;*/
            height: 58px;
            display: flex;
            align-items: center;
        }

        .header {
            box-sizing: border-box;
            width: 375px;

            .info {
                height: 105px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 28px;
                box-sizing: border-box;

                .userInfo {
                    height: 55px;
                    display: flex;

                    img {
                        width: 55px;
                        height: 55px;
                        border-radius: 50%;
                    }

                    div {
                        margin-left: 16px;
                        font-size: 14px;
                        font-weight: 400;
                        height: 100%;

                        p {
                            height: 50%;
                            line-height: 25px;
                            text-align: left;
                        }
                    }
                }

                .flow {
                    text-align: left;
                    font-size: 14px;

                    p:first-child {
                        margin-bottom: 10px;
                    }

                    span {
                        color: #333333;
                        font-size: 24px;
                    }
                }
            }

            .tabBar {
                padding: 0 32px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-content: center;

                .touch {
                    .costomer {
                        width: 59px;
                        height: 59px;
                    }

                    .costomerName {
                        font-size: 15px;
                        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                        font-weight: 400;
                        color: rgba(51, 51, 51, 1);
                        line-height: 23px;
                        margin-top: 10px;
                    }
                }
            }

            .titles {
                color: #333333;
                font-size: 15px;
                margin-top: 9px;
                width: 100%;
                display: flex;
                justify-content: space-between;

                p {
                    width: 58px;
                }
            }

            .swiper {
                width: 100%;
                height: 70px;
                margin-top: 22px;
                box-sizing: border-box;
                padding: 10px 24px;
                box-sizing: border-box;
                border-bottom: 5px solid #f4f4f4;
                border-top: 5px solid #f4f4f4;
                line-height: 32px;
                overflow: hidden;
            }
        }

        .map {
            img {
                width: 100%;
                height: 155px;
                border-radius: 20px;
            }
        }

        .shopList {
            margin-top: 18px;
            width: 100%;
            height: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .tag {
                width: 91px;
                height: 25px;
                background: rgba(244, 244, 244, 1);
                border-radius: 12px;
                line-height: 25px;
                font-size: 12px;
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
            }

            p:last-child {
                color: rgba(102, 102, 102, 1);
            }

        }

        .date {
            display: flex;
            justify-content: center;
            align-items: center;

            img:nth-child(2) {
                margin: 0 6px;
            }
        }
    }

    .shopLevel {
        width: 345px;
        height: 64px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 6px 0px rgba(228, 228, 230, 0.5);
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        padding: 23px 13px;
        box-sizing: border-box;
        margin-bottom: 10px;

        .icon {
            width: 25px;
            height: 20px;
        }

        .shopInfo {
            margin-left: 13px;

            .shopIcon {
                width: 37px;
                height: 37px;
                border-radius: 50%;
                margin-top: -10px;
            }

            .shopName {
                font-size: 13px;
                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 20px;
            }
        }


    }

    .more {
        width: 345px;
        height: 43px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 6px 0px rgba(228, 228, 230, 0.5);
        border-radius: 5px;
        line-height: 43px;
        font-size: 13px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
    }

</style>
